<template>
  <div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
       <router-link to="/">
        <el-menu-item index="0">
          <span class="iconfont icon-home"></span>
          首页
        </el-menu-item>
      </router-link>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>商品</span>
        </template>
        <el-menu-item-group>
          <router-link to="/pms/product">
            <el-menu-item index="1-1"><span class="iconfont icon-liebiao"></span>商品列表</el-menu-item>
          </router-link>
          <router-link to="/pms/productadd/">
          <el-menu-item index="1-2"><span class="iconfont icon-tianjia"></span>添加商品</el-menu-item>
          </router-link>
           <router-link to="/pms/productCate">
          <el-menu-item index="1-3"><span class="iconfont icon-fenlei"></span>商品分类</el-menu-item>
          </router-link>
           <router-link to="/pms/productAttr">
          <el-menu-item index="1-4"><span class="iconfont icon-haofangtuo400iconfontzhuzhaileixing"></span>商品类型</el-menu-item>
          </router-link>
           <router-link to="/pms/brand">
          <el-menu-item index="1-5"><span class="iconfont icon-pinpaitemai"></span>品牌管理</el-menu-item>
           </router-link>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
//左侧菜单可以写成 循环的形式；this.$router
export default {
  name: "sidebar",
  methods: {
    handleOpen() {
      console.log("打开菜单");
    },
    handleClose() {
      console.log("关闭菜单");
    },
  },
};
</script>

<style scoped lang="scss">
.mymenu {
  .el-menu {
    border-right: none;
  }
}
</style>